<template>
  <view class="favorites-container">
    <!-- 收藏内容列表 -->
    <view class="favorites-list">
      <view 
        v-for="(item, index) in filteredItems" 
        :key="item.id" 
        class="favorite-item"
        @click="viewDetail(item)"
      >
        <image class="cover" :src="item.cover" mode="aspectFill"></image>
        <view class="info">
          <text class="title">{{item.title}}</text>
          <text class="author">{{item.author}}</text>
          <view class="meta">
            <text class="type">{{item.type}}</text>
            <text class="date">{{formatDate(item.collectTime)}}</text>
          </view>
        </view>
        <view class="actions">
          <uni-icons 
            type="star-filled" 
            size="20" 
            :color="item.starred ? '#FFC107' : '#ddd'" 
            @click.stop="toggleStar(item)"
          ></uni-icons>
          <uni-icons 
            type="more" 
            size="20" 
            color="#666" 
            @click.stop="showActionMenu(item)"
          ></uni-icons>
        </view>
      </view>

      <view v-if="filteredItems.length === 0" class="empty-tips">
        <image src="/static/404.png" mode="widthFix"></image>
        <text>暂无收藏内容</text>
        <button class="explore-btn" @click="goExplore">去发现好书</button>
      </view>
    </view>

    <!-- 排序菜单 -->
    <uni-popup ref="sortMenu" type="bottom">
      <view class="sort-menu">
        <view class="menu-title">排序方式</view>
        <view 
          v-for="(option, index) in sortOptions" 
          :key="index" 
          class="menu-item"
          @click="changeSort(option.value)"
        >
          <text>{{option.label}}</text>
          <uni-icons 
            type="checkmark" 
            size="16" 
            color="#2A5CAA" 
            v-if="sortBy === option.value"
          ></uni-icons>
        </view>
      </view>
    </uni-popup>

    <!-- 操作菜单 -->
    <uni-popup ref="actionMenu" type="bottom">
      <view class="action-menu">
        <view class="menu-item" @click="removeFromFavorites(selectedItem)">
          <uni-icons type="trash" size="16" color="#666"></uni-icons>
          <text>移出收藏</text>
        </view>
        <view class="menu-item" @click="addToGroup(selectedItem)">
          <uni-icons type="plusempty" size="16" color="#666"></uni-icons>
          <text>添加到分组</text>
        </view>
        <view class="menu-item" @click="shareItem(selectedItem)">
          <uni-icons type="paperplane" size="16" color="#666"></uni-icons>
          <text>分享</text>
        </view>
        <view class="menu-item cancel" @click="closeActionMenu">
          <text>取消</text>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 0,
      tabs: [
        { name: '全部', count: 42 },
        { name: '书籍', count: 28 },
        { name: '文章', count: 10 },
        { name: '笔记', count: 4 },
        { name: '书单', count: 5 }
      ],
      sortBy: 'time', // time|title|author
      sortOptions: [
        { label: '按收藏时间', value: 'time' },
        { label: '按书名排序', value: 'title' },
        { label: '按作者排序', value: 'author' }
      ],
      favorites: [
        {
          id: 1,
          title: '如何阅读一本书',
          author: '莫提默·J·艾德勒',
          cover: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.IRQ9ZU1Q0XdwtttUP0-MzwAAAA?w=120&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7',
          type: '书籍',
          collectTime: '2023-05-15T14:30:00',
          starred: true
        },
        {
          id: 2,
          title: '活着',
          author: '余华',
          cover: 'https://img13.360buyimg.com/n0/jfs/t17410/49/1720742472/193058/e66fc487/5ad5c2e3N28db4e91.jpg',
          type: '书籍',
          collectTime: '2023-04-20T09:15:00',
          starred: true
        },
        {
          id: 3,
          title: '高效阅读的七个习惯',
          author: '阅读研究所',
          cover: 'https://tse2-mm.cn.bing.net/th/id/OIP-C._7TeCed5679PoEhOaqcNyQHaFM?rs=1&pid=ImgDetMain',
          type: '文章',
          collectTime: '2023-06-10T16:45:00',
          starred: true
        },
        {
          id: 4,
          title: '我的读书笔记：认知觉醒',
          author: '我的笔记',
          cover: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.rpayOK6Q-oBgBIXHG8fFuwHaJ4?w=121&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7',
          type: '笔记',
          collectTime: '2023-06-18T11:10:00',
                 starred: true
        },
        {
          id: 5,
          title: '2023年度必读书单',
          author: '书友推荐',
          cover: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.7iZnIU6idIaANHfkAi3IJgHaHa?rs=1&pid=ImgDetMain',
          type: '书单',
          collectTime: '2023-01-05T10:20:00',
          starred: true
        }
      ],
      selectedItem: null,
      searchKeyword: ''
    }
  },
  computed: {
    filteredItems() {
      let items = [...this.favorites]
      
      // 按分类筛选
      if (this.activeTab > 0) {
        const type = this.tabs[this.activeTab].name
        items = items.filter(item => item.type === type)
      }
      
      // 搜索筛选
      if (this.searchKeyword) {
        const keyword = this.searchKeyword.toLowerCase()
        items = items.filter(item => 
          item.title.toLowerCase().includes(keyword) || 
          item.author.toLowerCase().includes(keyword)
        )
      }
      
      // 排序
      switch (this.sortBy) {
        case 'title':
          return items.sort((a, b) => a.title.localeCompare(b.title))
        case 'author':
          return items.sort((a, b) => a.author.localeCompare(b.author))
        default:
          return items.sort((a, b) => new Date(b.collectTime) - new Date(a.collectTime))
      }
    }
  },
  methods: {
    switchTab(index) {
      this.activeTab = index
    },
    showSortMenu() {
      this.$refs.sortMenu.open()
    },
    changeSort(value) {
      this.sortBy = value
      this.$refs.sortMenu.close()
    },
    showActionMenu(item) {
      this.selectedItem = item
      this.$refs.actionMenu.open()
    },
    closeActionMenu() {
      this.$refs.actionMenu.close()
    },
    toggleStar(item) {
      item.starred = !item.starred
      uni.showToast({
        title: item.starred ? '已标星' : '已取消标星',
        icon: 'none'
      })
    },
    removeFromFavorites(item) {
      uni.showModal({
        title: '确认移除',
        content: `确定要将《${item.title}》移出收藏吗？`,
        success: (res) => {
          if (res.confirm) {
            const index = this.favorites.findIndex(i => i.id === item.id)
            if (index !== -1) {
              this.favorites.splice(index, 1)
              uni.showToast({ title: '已移出收藏', icon: 'success' })
              this.updateTabCounts()
              this.closeActionMenu()
            }
          }
        }
      })
    },
    addToGroup(item) {
      uni.showToast({ title: `已添加《${item.title}》到分组`, icon: 'none' })
      this.closeActionMenu()
    },
    shareItem(item) {
      uni.share({
        provider: 'weixin',
        type: 0,
        title: `分享收藏: ${item.title}`,
        summary: `我在阅读应用中收藏了《${item.title}》`,
        success: () => {
          uni.showToast({ title: '分享成功', icon: 'success' })
          this.closeActionMenu()
        }
      })
    },
    viewDetail(item) {
      let url = ''
      switch (item.type) {
        case '书籍':
          url = `/pages/book-detail/book-detail?id=${item.id}`
          break
        case '文章':
          url = `/pages/article-detail/article-detail?id=${item.id}`
          break
        case '笔记':
          url = `/pages/note-detail/note-detail?id=${item.id}`
          break
        case '书单':
          url = `/pages/booklist-detail/booklist-detail?id=${item.id}`
          break
      }
      uni.navigateTo({ url })
    },
    showSearch() {
      uni.navigateTo({ url: '/pages/search/search?type=favorites' })
    },
    goExplore() {
      uni.switchTab({ url: '/pages/explore/explore' })
    },
    formatDate(dateString) {
      const date = new Date(dateString)
      return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
    },
    updateTabCounts() {
      this.tabs[0].count = this.favorites.length
      this.tabs[1].count = this.favorites.filter(i => i.type === '书籍').length
      this.tabs[2].count = this.favorites.filter(i => i.type === '文章').length
      this.tabs[3].count = this.favorites.filter(i => i.type === '笔记').length
      this.tabs[4].count = this.favorites.filter(i => i.type === '书单').length
    }
  }
}
</script>

<style lang="scss">
.favorites-container {
  padding: 15px;
  background-color: #f8f9fa;
  min-height: 100vh;
}

.favorites-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  
  .title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
  }
  
  .header-actions {
    display: flex;
    
    .uni-icons {
      margin-left: 15px;
    }
  }
}

.category-tabs {
  white-space: nowrap;
  margin-bottom: 15px;
  
  .tab-item {
    display: inline-flex;
    align-items: center;
    padding: 8px 15px;
    margin-right: 10px;
    background-color: #fff;
    border-radius: 15px;
    font-size: 14px;
    color: #666;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    position: relative;
    
    &.active {
      background-color: #2A5CAA;
      color: #fff;
    }
    
    .tab-badge {
      position: absolute;
      top: -5px;
      right: -5px;
      background-color: #FF6B6B;
      color: #fff;
      border-radius: 10px;
      font-size: 10px;
      min-width: 16px;
      height: 16px;
      line-height: 16px;
      text-align: center;
      padding: 0 4px;
    }
  }
}

.favorites-list {
  .favorite-item {
    display: flex;
    background-color: #fff;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    
    .cover {
      width: 60px;
      height: 80px;
      border-radius: 4px;
      margin-right: 12px;
    }
    
    .info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      
      .title {
        font-size: 16px;
        font-weight: bold;
        color: #333;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      
      .author {
        font-size: 12px;
        color: #666;
      }
      
      .meta {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: #999;
        
        .type {
          background-color: #f0f0f0;
          padding: 2px 6px;
          border-radius: 3px;
        }
      }
    }
    
    .actions {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      margin-left: 10px;
      
      .uni-icons {
        margin-bottom: 10px;
      }
    }
  }
  
  .empty-tips {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 0;
    
    image {
      width: 150px;
      height: 150px;
      margin-bottom: 20px;
    }
    
    text {
      font-size: 14px;
      color: #666;
      margin-bottom: 20px;
    }
    
    .explore-btn {
      background-color: #2A5CAA;
      color: #fff;
      border-radius: 20px;
      padding: 0 30px;
      font-size: 14px;
    }
  }
}

.sort-menu, .action-menu {
  background-color: #fff;
  border-radius: 12px 12px 0 0;
  padding: 15px;
  
  .menu-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
  }
  
  .menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    font-size: 15px;
    color: #333;
    border-bottom: 1px solid #f5f5f5;
    
    &:last-child {
      border-bottom: none;
    }
    
    &.cancel {
      justify-content: center;
      color: #666;
      margin-top: 10px;
    }
    
    .uni-icons {
      margin-right: 10px;
    }
  }
}
</style>